<script setup lang="ts">
import { computed, ref } from 'vue';
import { pick } from 'lodash';
import { basicConfigService } from '@/api/basicConfig';

const baseTable = ref(null);

const searchForm = ref<any>(null);
// const recordTime = ref([]);

const searchParams = ref({
  statisticsType: 1, // 1 全部  2 按供电单位 3 按供电线路 4 按台区
  recordTimeBegin: null,
  recordTimeEnd: null,
  wxGroupName: '',
  powerId: '',
  lineId: '',
  areaId: '',
  communityId: '',
  griManagerId: '',
  recordTime: [],

  //临时变量
  lineSearch: {
    powerId: '',
  },
  areaSearch: {
    powerId: '',
    lineId: '',
  },
  communitySearch: {
    powerId: '',
    lineId: '',
    areaId: '',
  },
});
const defaultSearchParams = searchParams;

const formItems = ref([]);

const powerItem = ref({
  name: '供电单位',
  key: 'powerId',
  funName: 'getByAreaQueryByPower',
  option: {
    name: 'powerName',
    value: 'powerId',
  },
});
const lineItem = ref({
  name: '供电线路',
  key: 'lineId',
  funName: 'getByAreaQueryByLine',
  option: {
    name: 'lineName',
    value: 'lineId',
  },
});
const areaItem = ref({
  name: '台区',
  key: 'areaId',
  funName: 'getByAreaQueryByArea',
  option: {
    name: 'areaName',
    value: 'areaId',
  },
});

const communityItem = ref({
  name: '关联片区/村社',
  key: 'communityId',
  funName: 'getAllCommunity',
  labelWidth: '140',
  option: {
    name: 'communityName',
    value: 'communityId',
  },
});

const resetSearchParams = () => {
  searchParams.value.recordTime = [];
  searchParams.value.recordTimeBegin = null;
  searchParams.value.recordTimeEnd = null;
  searchParams.value.wxGroupName = '';
  searchParams.value.powerId = '';
  searchParams.value.lineId = '';
  searchParams.value.areaId = '';
  searchParams.value.communityId = '';
  searchParams.value.griManagerId = '';
};

//
const currentParams = computed(() => {
  if (searchParams.value.statisticsType === 1) {
    const params = pick(searchParams.value, [
      'statisticsType',
      'recordTimeBegin',
      'recordTimeEnd',
      'wxGroupName',
      'powerId',
      'lineId',
      'areaId',
      'communityId',
      'griManagerId',
    ]);
    return params;
  }
  if (searchParams.value.statisticsType === 2) {
    const params = pick(searchParams.value, ['statisticsType', 'recordTimeBegin', 'recordTimeEnd', 'powerId']);
    return params;
  }
  if (searchParams.value.statisticsType === 3) {
    const params = pick(searchParams.value, ['statisticsType', 'recordTimeBegin', 'recordTimeEnd', 'lineId']);
    return params;
  }
  if (searchParams.value.statisticsType === 4) {
    const params = pick(searchParams.value, [
      'statisticsType',
      'recordTimeBegin',
      'recordTimeEnd',
      'powerId',
      'lineId',
      'areaId',
    ]);
    return params;
  }
});

const handleSearch = (data = { sort: undefined }, e = '') => {
  baseTable.value.handleSearch({
    ...currentParams.value,
    updateTimeOrder: data?.sort,
  });
};
const resetForm = () => {
  // 重置
  searchParams.value.statisticsType = 1;
  resetSearchParams();
  searchForm.value.resetForm();
};

const changePower = (val: any) => {
  //线路搜索
  searchParams.value.lineSearch.powerId = val;
  //台区搜索赋值
  searchParams.value.areaSearch.powerId = val;
  searchParams.value.areaSearch.lineId = '';

  //社区搜索赋值
  searchParams.value.communitySearch.powerId = val;
  searchParams.value.communitySearch.lineId = '';
  searchParams.value.communitySearch.areaId = '';

  //公共搜索
  searchParams.value.lineId = '';
  searchParams.value.areaId = '';
  searchParams.value.communityId = '';
};
const changeLine = (val: any) => {
  searchParams.value.areaSearch.lineId = val;

  searchParams.value.communitySearch.lineId = val;
  searchParams.value.communitySearch.areaId = '';

  searchParams.value.areaId = '';
  searchParams.value.communityId = '';
};

const changeArea = (val: any) => {
  searchParams.value.communitySearch.areaId = val;

  searchParams.value.communityId = '';
};

watch(
  () => searchParams.value.recordTime,
  (newVal) => {
    if (newVal) {
      searchParams.value.recordTimeBegin = newVal[0];
      searchParams.value.recordTimeEnd = newVal[1];
    } else {
      searchParams.value.recordTimeBegin = null;
      searchParams.value.recordTimeEnd = null;
    }
  },
);
watch(
  () => searchParams.value.statisticsType,
  (newVal) => {
    resetSearchParams();
    // this.$refs.child.showChildDialog();
    // searchForm.value.resetForm();
    handleSearch();
  },
);

const optionsMange = ref([]);
const getAllManager = () => {
  basicConfigService.getAllManager({ data: {} }).then((res) => {
    optionsMange.value = res.data.map((n) => {
      return {
        label: n.managerName,
        value: n.managerId,
      };
    });
  });
};

onMounted(() => {
  getAllManager();
});

const downLoad = () => {
  basicConfigService
    .pageListAppealDownload({
      data: {
        ...currentParams.value,
        // orderField: sortTablekey.value,
        // isDesc: isDesc.value,
        date: undefined,
      },
    })
    .then((res) => {
      var blob = new Blob([res]);
      let url = window.URL.createObjectURL(blob);
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', '诉求统计.xls');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
};
</script>
<template>
  <div>
    <div>
      <!--      <el-form-->
      <!--        ref="ruleFormRef"-->
      <!--        label-width="100px"-->
      <!--        :model="searchParams"-->
      <!--        style="padding: 16px 16px 0 16px"-->
      <!--        :inline="true"-->
      <!--      >-->
      <BaseForm
        ref="searchForm"
        type="search"
        v-model:items="formItems"
        v-model:form="searchParams"
        @search="handleSearch"
        label-width="90"
      >
        <el-form-item label="统计维度">
          <el-radio-group v-model="searchParams.statisticsType">
            <el-radio-button :label="1">全部</el-radio-button>
            <el-radio-button :label="2">按供电单位</el-radio-button>
            <el-radio-button :label="3">按供电线路</el-radio-button>
            <el-radio-button :label="4">按台区</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="统计时间">
          <el-date-picker
            style="width: 250px"
            v-model="searchParams.recordTime"
            type="datetimerange"
            range-separator="~"
            value-format="YYYY-MM-DD HH:ss:mm"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="[new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)]"
          />
        </el-form-item>
        <el-form-item label="微信群名称" v-if="searchParams.statisticsType === 1">
          <el-input style="width: 180px" v-model="searchParams.wxGroupName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="供电单位">
          <selectPage
            style="width: 180px"
            :item="powerItem"
            v-model="searchParams.powerId"
            @update:modelValue="changePower"
          />
        </el-form-item>
        <el-form-item
          label="供电线路"
          v-if="
            searchParams.statisticsType === 1 || searchParams.statisticsType === 3 || searchParams.statisticsType === 4
          "
        >
          <selectPage
            :item="lineItem"
            v-model="searchParams.lineId"
            :search="searchParams.lineSearch"
            @update:modelValue="changeLine"
          />
        </el-form-item>
        <el-form-item label="台区" v-if="searchParams.statisticsType === 1 || searchParams.statisticsType === 4">
          <selectPage
            :item="areaItem"
            v-model="searchParams.areaId"
            :search="searchParams.areaSearch"
            @update:modelValue="changeArea"
          />
        </el-form-item>
        <el-form-item label="片区/村社" v-if="searchParams.statisticsType === 1">
          <selectPage
            :item="communityItem"
            ref="CommunityRef"
            v-model="searchParams.communityId"
            :search="searchParams.communitySearch"
          />
        </el-form-item>
        <el-form-item label="关联网格经理" v-if="searchParams.statisticsType === 1" label-width="120">
          <el-select style="width: 180px" v-model="searchParams.griManagerId" filterable placeholder="请选择" clearable>
            <el-option v-for="item in optionsMange" :key="item.value" :value="item.value" :label="item.label">
            </el-option>
          </el-select>
        </el-form-item>
      </BaseForm>
    </div>
    <div v-if="searchParams.statisticsType === 1">
      <BaseTable
        ref="baseTable"
        :getTableDataFn="basicConfigService.pageListAppeal"
        :searchParams="currentParams"
        :downLoad="downLoad"
        :down="true"
      >
        <el-table-column prop="groupId" label="微信群ID" fixed="left" />
        <el-table-column prop="groupName" label="微信群名称" fixed show-overflow-tooltip />
        <el-table-column prop="powerNames" label="供电单位" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="lineNames" label="供电线路" show-overflow-tooltip></el-table-column>
        <el-table-column prop="areaNames" label="台区" show-overflow-tooltip></el-table-column>
        <el-table-column prop="communityNames" label="关联片区/村社" show-overflow-tooltip></el-table-column>
        <el-table-column prop="managerNames" label="关联网格经理" show-overflow-tooltip></el-table-column>
        <el-table-column prop="isElectricNum" label="客户涉电诉求量" show-overflow-tooltip>
          <template #default="scope">
            <el-text type="primary" @click="$router.push('/reportStatistics/statistics/robotAnswer')">{{
              scope.row.isElectricNum
            }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="isElectricUnKnowNum" label="未知涉电诉求量" show-overflow-tooltip>
          <template #default="scope">
            <el-text type="primary" @click="$router.push('/reportStatistics/statistics/alterProcessing')">{{
              scope.row.isElectricUnKnowNum
            }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="robotReplyNum" label="机器人回复量" fixed="right">
          <template #default="scope">
            <el-text type="primary" @click="$router.push('/reportStatistics/statistics/robotAnswer')">{{
              scope.row.robotReplyNum
            }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="managerReplyNum" label="网格经理回复量" fixed="right">
          <template #default="scope">
            <el-text type="primary" @click="$router.push('/reportStatistics/statistics/gridManager')">{{
              scope.row.managerReplyNum
            }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="workOrderNum" label="生成工单量" fixed="right">
          <template #default="scope">
            <el-text type="primary" @click="$router.push('/reportStatistics/statistics/robotAnswer')">{{
              scope.row.workOrderNum
            }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="opinionKeyNum" label="舆情词触发量" fixed="right">
          <template #default="scope">
            <el-text type="primary" @click="$router.push('/reportStatistics/statistics/publicOpinionReport')">{{
              scope.row.opinionKeyNum
            }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="keyNum" label="关键词触发量" fixed="right">
          <template #default="scope">
            <el-text type="primary" @click="$router.push('/reportStatistics/statistics/publicOpinionReport')">{{
              scope.row.keyNum
            }}</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="commonNum" label="常见问题触发量" fixed="right">
          <template #default="scope">
            <el-text type="primary" @click="$router.push('/reportStatistics/statistics/publicOpinionReport')">{{
              scope.row.commonNum
            }}</el-text>
          </template>
        </el-table-column>
      </BaseTable>
    </div>
    <BaseTable
      v-if="searchParams.statisticsType === 2"
      ref="baseTable"
      :getTableDataFn="basicConfigService.pageListAppeal"
      :searchParams="searchParams"
      :downLoad="downLoad"
      :down="true"
    >
      <el-table-column prop="powerCode" label="供电单位ID" fixed="left" />
      <el-table-column prop="powerNames" label="供电单位" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="isElectricNum" label="客户涉电诉求量" show-overflow-tooltip>
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/robotAnswer')">{{
            scope.row.isElectricNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="isElectricUnKnowNum" label="未知涉电诉求量" show-overflow-tooltip>
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/alterProcessing')">{{
            scope.row.isElectricUnKnowNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="robotReplyNum" label="机器人回复量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/robotAnswer')">{{
            scope.row.robotReplyNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="managerReplyNum" label="网格经理回复量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/gridManager')">{{
            scope.row.managerReplyNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="workOrderNum" label="生成工单量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/robotAnswer')">{{
            scope.row.workOrderNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="opinionKeyNum" label="舆情词触发量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/publicOpinionReport')">{{
            scope.row.opinionKeyNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="keyNum" label="关键词触发量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/publicOpinionReport')">{{
            scope.row.keyNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="commonNum" label="常见问题触发量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/publicOpinionReport')">{{
            scope.row.commonNum
          }}</el-text>
        </template>
      </el-table-column>
    </BaseTable>
    <BaseTable
      v-if="searchParams.statisticsType === 3"
      ref="baseTable"
      :getTableDataFn="basicConfigService.pageListAppeal"
      :searchParams="searchParams"
      :downLoad="downLoad"
      :down="true"
    >
      <el-table-column prop="lineCode" label="供电线路ID" fixed="left" />
      <el-table-column prop="lineNames" label="供电线路" show-overflow-tooltip></el-table-column>
      <el-table-column prop="powerNames" label="供电单位" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="isElectricNum" label="客户涉电诉求量" show-overflow-tooltip>
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/robotAnswer')">{{
            scope.row.isElectricNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="isElectricUnKnowNum" label="未知涉电诉求量" show-overflow-tooltip>
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/alterProcessing')">{{
            scope.row.isElectricUnKnowNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="robotReplyNum" label="机器人回复量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/robotAnswer')">{{
            scope.row.robotReplyNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="managerReplyNum" label="网格经理回复量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/gridManager')">{{
            scope.row.managerReplyNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="workOrderNum" label="生成工单量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/robotAnswer')">{{
            scope.row.workOrderNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="opinionKeyNum" label="舆情词触发量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/publicOpinionReport')">{{
            scope.row.opinionKeyNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="keyNum" label="关键词触发量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/publicOpinionReport')">{{
            scope.row.keyNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="commonNum" label="常见问题触发量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/publicOpinionReport')">{{
            scope.row.commonNum
          }}</el-text>
        </template>
      </el-table-column>
    </BaseTable>
    <BaseTable
      v-if="searchParams.statisticsType === 4"
      ref="baseTable"
      :getTableDataFn="basicConfigService.pageListAppeal"
      :searchParams="searchParams"
      :downLoad="downLoad"
      :down="true"
    >
      <el-table-column prop="areaCode" label="台区ID" fixed="left" />
      <el-table-column prop="areaNames" label="台区" show-overflow-tooltip></el-table-column>
      <el-table-column prop="powerNames" label="供电单位" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="lineNames" label="供电线路" show-overflow-tooltip></el-table-column>
      <el-table-column prop="isElectricNum" label="客户涉电诉求量" show-overflow-tooltip>
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/robotAnswer')">{{
            scope.row.isElectricNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="isElectricUnKnowNum" label="未知涉电诉求量" show-overflow-tooltip>
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/alterProcessing')">{{
            scope.row.isElectricUnKnowNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="robotReplyNum" label="机器人回复量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/robotAnswer')">{{
            scope.row.robotReplyNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="managerReplyNum" label="网格经理回复量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/gridManager')">{{
            scope.row.managerReplyNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="workOrderNum" label="生成工单量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/robotAnswer')">{{
            scope.row.workOrderNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="opinionKeyNum" label="舆情词触发量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/publicOpinionReport')">{{
            scope.row.opinionKeyNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="keyNum" label="关键词触发量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/publicOpinionReport')">{{
            scope.row.keyNum
          }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="commonNum" label="常见问题触发量" fixed="right">
        <template #default="scope">
          <el-text type="primary" @click="$router.push('/reportStatistics/statistics/publicOpinionReport')">{{
            scope.row.commonNum
          }}</el-text>
        </template>
      </el-table-column>
    </BaseTable>
  </div>
</template>
